<!--组件结构的地方-->
<template>
  <div>
    <div class="box">
      <!--第三步:使用子组件-->
      <!-- 把添加todo的方法传给子组件 -->
      <Header :addTodo="addTodo" />
      <!-- 父组件给子组件传递props数据 -->
      <Main
        :todoList="todoList"
        :checkTodo="checkTodo"
        :deleteTodo="deleteTodo"
      />
      <Footer
        :doneLength="doneLength"
        :allLength="allLength"
        :allCheckTodo="allCheckTodo"
        :deleteAllTodo="deleteAllTodo"
      />
    </div>
    <Transition />
  </div>
</template>

<!--JS区域-->
<script>
//引入子组件
import Header from "./components/todo/Header.vue";
import Main from "./components/todo/Main.vue";
import Footer from "./components/todo/Footer.vue";
import Transition from "./components/transition/Transition.vue";
//对外默认暴露暴露组件配置项
export default {
  //决定了组件在开发者工具中显示名字
  name: "app",
  //组件的响应式数据
  data() {
    return {
      todoList: JSON.parse(localStorage.getItem("todos")) || [
        { id: "001", name: "吃饭", done: false },
        { id: "002", name: "睡觉", done: false },
        { id: "003", name: "打豆豆", done: false },
      ],
    };
  },
  //组件实例的方法
  methods: {
    //添加todo
    addTodo(todo) {
      //验证传来的todo是否有效
      if (todo.trim() === "") {
        alert("内容不能为空");
        return;
      }
      //验证是否已经存在
      if (this.todoList.find((item) => item.name === todo)) {
        alert("该任务已经存在");
        return;
      }
      //
      this.todoList.push({
        id: `00${this.todoList.length + 1}`,
        name: todo,
        done: false,
      });
    },
    //单选 勾选状态
    checkTodo(id) {
      // this.todoList = this.todoList.map((item) => {
      // if (item.id === id) {
      //   item.done = !item.done;
      // }
      // return item;
      //简写
      // item.id===id?{...item,done:!item.done}:item
      // });

      //所有的对象都是响应式的
      let obj = this.todoList.find((item) => item.id === id);
      //直接操作数组中的对象
      obj.done = !obj.done;
    },
    //删除todo
    deleteTodo(id) {
      this.todoList = this.todoList.filter((item) => item.id !== id);
    },
    //全选/取消全选
    allCheckTodo(checked) {
      this.todoList = this.todoList.map((item) => {
        item.done = checked;
        return item;
      });
    },
    //删除已完成
    deleteAllTodo() {
      this.todoList = this.todoList.filter((item) => item.done === false);
    },
  },
  //计算属性
  computed: {
    //已完成个数
    doneLength() {
      return this.todoList.filter((item) => item.done === true).length;
    },
    //全部个数
    allLength() {
      return this.todoList.length;
    },
  },
  //监听属性
  watch: {
    //监听todoList，变化后存到localStorage
    todoList: {
      deep: true,
      immediate: true,
      handler(newValue) {
        //保存最新值到本地
        localStorage.setItem("todos", JSON.stringify(newValue));
      },
    },
  },
  //注册子组件
  components: {
    Header,
    Main,
    Footer,
    Transition,
  },
};
</script>


<style scoped>
.box {
  width: 300px;
  border: 1px solid #000;
  border-radius: 4px;
  margin: 0 auto;
  padding: 10px;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>

